<template>
  <div class="sale">
    <div class="title" v-if="title" @click="showDate">
      <span></span>
      <span class="name">{{title}}</span>
      <span class="btn" @click.stop="reset">重置</span>
    </div>
    <div v-else class="title none" @click="showDate">
      选择时间
    </div>

    <div v-if="!shopFilter&&!headName&&!level"  @click="showUsers" class="users white-block">
      <span class="label">人员筛选</span>
      <span class="name">{{userName}}</span>
      <span class="btn" style="color: red" @click.stop="resetUser" v-if="userId">重置</span>
      <span class="btn" style="color: red" v-else>选择</span>
    </div>

    <div v-if="!shopFilter&&!userName&&!level"  @click="showHeads" class="users white-block">
      <span class="label">总部筛选</span>
      <span class="name">{{headName}}</span>
      <span class="btn" style="color: red" @click.stop="resetHead" v-if="headId">重置</span>
      <span class="btn" style="color: red" v-else>选择</span>
    </div>

    <div v-if="!userName&&!headName&&!level"   @click="showShops" class="users white-block">
      <span class="label">药店筛选</span>
      <span class="name">{{shopFilter}}</span>
      <span class="btn" style="color: red" @click.stop="resetShopFilter" v-if="shopFilter">重置</span>
      <span class="btn" style="color: red" v-else>选择</span>
    </div>

    <div v-if="!userName&&!headName&&!shopFilter"   @click="showLevels" class="users white-block">
      <span class="label">级别筛选</span>
      <span class="name">{{level}}</span>
      <span class="btn" style="color: red" @click.stop="resetLevel" v-if="level">重置</span>
      <span class="btn" style="color: red" v-else>选择</span>
    </div>

    <div class="filter">
      <span class="ft" @click="showPrompt">筛选</span>
      <span class="val">{{fv}}</span>
      <span class="reset" @click="resetFilter" v-if="fv">重置</span>
    </div>

    <calendar mode="during"  @change="changeDate"  :show.sync="dateShow"  />

    <div class="sales">
      <div class="route" v-for="(items,key) in sales" :key="key">
        <div class="route-title">
          <span class="name"> {{ parseInt(key)+1 }}月</span>
          <span class="name"> {{sum(items)}}</span>
          <span class="del" @click="toDetail(key)">详情</span>
        </div>
        <div class="items">
          <div class="item" v-for="(item,index) in items" :key="index">
            <span class="name"> {{item.goodsName}}</span>
            <span class="amount"> {{item.amount}} {{item.spec}}</span>
<!--            <span class="amount"> {{item.spec}}</span>-->
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { list } from '@/api/sale'
import { listShop } from '@/api/shop'
import { parseTime, str2Date } from '@/util/time'
import { showPrompt } from '@/dialog'
import { gtBusUser } from '@/api/user'
import { listHead } from '@/api/head'
export default {
  activated () {
    listShop().then(res => {
      this.shops = res.data
    })
    gtBusUser().then(res => {
      this.users = res.data
    })
    listHead().then(res => {
      this.heads = res.data
    })
  },
  data () {
    return {
      heads: null,
      headName: null,
      headId: null,
      userName: null,
      userId: null,
      level: null,
      fv: null,
      shopFilter: null,
      dateShow: false,
      sales: [],
      dateStart: null,
      dateEnd: null
    }
  },
  computed: {
    title () {
      if (this.dateStart != null && this.dateEnd != null) {
        if (this.dateStart === this.dateEnd) {
          return this.dateStart
        } else {
          return this.dateStart + '--' + this.dateEnd
        }
      }
      return null
    }
  },
  methods: {
    toDetail (month) {
      this.$router.push({
        path: '/sale/detail',
        query: {
          shopId: this.shopId,
          shopName: this.shopName,
          headId: this.headId,
          headName: this.headName,
          userId: this.userId,
          userName: this.userName,
          level: this.level,
          month: parseInt(month) + 1
        }
      })
    },
    sum (items) {
      let sum = 0
      for (let i = 0; i < items.length; i++) {
        sum += items[i].amount
      }
      return sum
    },
    showHeads () {
      const data = this.heads.filter(f => {
        if (!this.fv || f.name.indexOf(this.fv) > -1) {
          return true
        }
        return false
      }).map(head => {
        const m = { text: head.name, value: head.id }
        return m
      })
      this.$createPicker({
        title: '选择总部',
        data: [data],
        onSelect: this.selectHead
      }).show()
    },
    selectHead (selectedVal, selectedIndex, selectedText) {
      this.headId = selectedVal.join()
      this.headName = selectedText.join()
      // this.resetUser()
      // this.resetShopFilter()
      this.getSales()
    },
    resetHead () {
      this.headName = null
      this.headId = null
    },
    showUsers () {
      const users = Object.keys(this.users).map(k => {
        const children = this.users[k].map(v => {
          const m = { text: v.name, value: v.id }
          return m
        })
        const r = { text: k, value: k, children }
        return r
      })
      if (!this.picker) {
        this.picker = this.$createCascadePicker({
          title: '选择用户',
          data: users,
          onSelect: this.selectUser
        })
      }
      this.picker.show()
    },
    selectUser (selectedVal, selectedIndex, selectedText) {
      this.userId = selectedVal[1]
      this.userName = selectedText[1]
      // this.resetShopFilter()
      // this.resetHead()
      this.getSales()
    },
    resetUser () {
      this.userName = null
      this.userId = null
    },
    str2Date (date) {
      return str2Date(date)
    },
    resetFilter () {
      this.fv = null
    },
    showPrompt () {
      showPrompt('输入关键字').then(res => {
        this.fv = res
      })
    },
    showLevels () {
      const data = [
        {
          text: 'A',
          value: 'A'
        },
        {
          text: 'B',
          value: 'B'
        }
      ]
      this.$createPicker({
        title: '选择级别',
        data: [data],
        onSelect: this.selectLevel
      }).show()
    },
    selectLevel (val, index, text) {
      this.level = val.join()
      this.getSales()
    },
    resetLevel () {
      this.level = null
      this.resetHead()
      this.resetUser()
      this.resetShopFilter()
    },
    showShops () {
      // console.log(titles)
      const data = this.shops.filter(f => {
        if (!this.fv || f.shopName.indexOf(this.fv) > -1) {
          return true
        }
        return false
      }).map(shop => {
        const m = { text: shop.shopName, value: shop.id }
        return m
      })
      this.$createPicker({
        title: '选择药店',
        data: [data],
        onSelect: this.selectShop
      }).show()
    },
    selectShop (val, index, text) {
      this.shopFilter = text.join()
      this.shopId = val.join()
      // this.resetUser()
      // this.resetHead()
      this.getSales()
    },
    resetShopFilter () {
      this.shopFilter = null
      this.shopId = null
    },
    reset () {
      this.dateStart = null
      this.dateEnd = null
      this.getSales()
    },
    showDate () {
      this.dateShow = true
    },
    changeDate (dates) {
      if (dates.length === 2) {
        this.dateStart = dates[0].toDate().toLocaleDateString()
        this.dateEnd = dates[1].toDate().toLocaleDateString()
        this.dateShow = false
        this.getSales()
      }
    },
    getSales () {
      list(this.level, this.headId, this.userId, this.shopId, parseTime(this.dateStart), parseTime(this.dateEnd)).then(res => {
        this.sales = res.data
      })
      // if (this.level || this.shopId || this.userId || this.headId) {
      //   list(this.level, this.headId, this.userId, this.shopId, parseTime(this.dateStart), parseTime(this.dateEnd)).then(res => {
      //     this.sales = res.data
      //   })
      // }
    }
  }
}
</script>

<style scoped lang="stylus">
.check-box
  display flex
  align-items center
  justify-content center
  .label
    margin-right 10px
.sale
  padding 10px 10px
  .filter
    padding 0px 10px
    margin-top 20px
    color #55545D
    font-size 14px
    display flex
    align-items center
    justify-content space-between
    .ft
      color red
    .reset
      color red
  .title
    padding 0 10px
    display flex
    justify-content space-between
    align-items center
    height 60px
    color #55545D
    font-size 22px
    box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
    .btn
      color red
      font-size 14px
    &.none
      justify-content center
  .sales
    margin-top 20px
    padding-bottom 60px
    .route
      box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
      margin-bottom 20px
      .route-title
        font-size 18px
        color #55545D
        border-bottom 1px solid rgba(89, 88, 87, 0.52)
        height 40px
        display flex
        align-items center
        justify-content space-between
        padding 0 10px
        .del
          color red
      .items
        .item
          display flex
          align-items center
          justify-content space-between
          align-items center
          font-size 18px
          color #55545D
          height 40px
          padding 0 10px
          .inp
            display flex
            align-items center
            .label
              font-size 16px
              color #55545D
              margin-right 10px
  .users
    padding 0 10px
    display flex
    align-items center
    justify-content space-between
    font-size 16px
    color #55545D
    margin-top 10px
  .time-filter
    padding 0 10px
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    align-items center
    margin-top 20px

    .place
      font-size 16px
      color red
  .types
    border-top 1px solid #ECEAEA
    margin-top 20px
    padding-bottom 20px
    .desc
      display flex
      align-items center
      justify-content center
      font-size 10px
      color #989898
      padding 10px 0
    .total
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      font-size 14px
      color #55545D
    .type
      margin-bottom 10px
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      font-size 14px
      background-color #ECEAEA
      color #55545D
      .type-name
        min-width 80px
      .del
        color red
      .type-edit
        color red
      .radios
        display flex
        align-items center
        input
          margin-right 10px
        .false
          margin-left 20px
      &.done
        background-color white
      .week-date
        color #595857
  .btns
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    position fixed
    bottom 10px
    left 0
    right 0
    padding 0 10px
    .btn
      background-color white
      border 1px 1px 1px 1px solid #595857
      box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
      width 100px
      height 40px
      display flex
      justify-content center
      align-items center
  .sales
    border-top 1px solid #ECEAEA
    padding-top 20px
    .sale
      font-size 14px
      color #55545D
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      margin-bottom 10px
      &.done
        background-color #ECEAEA
</style>
